<template>
    <div class="register">
        <div class="header" @click="toLast">X</div>
        <div class="title">邮箱账号注册</div>
        <div class="form">
        <van-form validate-first @failed="onFailed" @submit="onSubmit">
            <div class="wrapper flex van-hairline--bottom">
          <van-field v-model="nickname" type="text" label="昵称" clearable placeholder="例如：陈晨" />
          <van-uploader v-model="avatar"  :preview-full-image='false' :deletable='false' :show-upload=isUpload :after-read='afterRead' preview-size='2rem' />
            </div>
             <div class="wrapper flex van-hairline--bottom">
          <van-field 
          v-model="email" 
          type="text"
           label="邮箱账号"
           name="checkemail"
            clearable
             placeholder="请填写邮箱"
             :rules="[{ pattern:checkemail, message: '邮箱格式错误' }]"
              />
            </div>
            <van-field
                v-model="pwd"
                type="password"
                name="pattern"
                label="密码"
                placeholder="请填写密码"
                clearable
                :rules="[{ pattern:checkpwd, message: '密码最少6位且包含数字大小写字母' }]"
            />
             <div class="reading f-center">
                <van-checkbox v-model="checked" icon-size=".8rem" checked-color="#6bee68">
                   <span style="color:#b1b1b1">已阅读并同意</span>
                   <span style="color:#003399">《软件许可及服务协议》</span>
                   </van-checkbox>
             </div>
            <van-button type="primary" block :disabled="!isRegister">注册</van-button>
        </van-form>
        </div>
    </div>
</template>
<script>
import {Meteor} from 'meteor/meteor';
import {user,image} from '../../../api/collections/index';
import upload from '../../../api/libs/upload';
export default {
    data(){
        return{
           nickname:'',
           avatar:[],
           email:'',
           pwd:'',
           avatarId:'',
           isUpload:true,
           checked:false,
           isRegister:false,
           checkpwd:/^(?=^.{6,}$)((?=.*[A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z]))^.*$/,
           checkemail:/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/
        }
    },
    watch:{
        nickname(){
            this.checkStatus()
        },
        avatar(){
            this.checkStatus()
        },
        email(){
            this.checkStatus()
        },
        pwd(){
            this.checkStatus()
        },
        checked(){
            this.checkStatus()
        }
    },
    methods:{
        toLast(){
            this.$router.go(-1)
        },
        // 上传图片
        afterRead(file){
            this.isUpload=false
            upload.uploadImg(file,this.afterUpload)
        },
        afterUpload(res){
            this.avatarId = res
        },
        checkStatus(){
            if(this.nickname.trim().length>0&&this.avatar.length>0&&this.email.trim().length>0&&this.pwd.trim().length>0&&this.checked){
                this.isRegister=true
            }
            else{
                 this.isRegister=false
            }
        },
        onFailed(){
            this.$toast('内容出现错误，请修改后重试');
        },
        onSubmit(){
            Meteor.call('user.create',this.formatUserInf(),(err, res)=>{
                    if(err){
                       this.$toast.fail(err.error)
                    } else {
                       this.$toast.success('注册成功,请继续完成登录')
                       this.$router.push('/login')
                    }
                })
        },
        // 格式化用户信息
        formatUserInf(){
            return {
                nickname:this.nickname,
                 email:this.email,
                password:this.pwd,
                avatarId:this.avatarId,
                pay:0
            }
        }
    },

}
</script>
<style scoped>
.register{
    padding:.5rem;
    background-color: #fff;
    height: 100vh;
}
.header{
    font-size: 1rem;
}
.title{
    margin-top: 2rem;
    font-size: .8rem;
    font-weight: 700;
}
.form{
    margin-top: 1rem;
}
.wrapper{
    margin-top: .2rem;
}
.wrapper .text{
    width: 4rem;
    font-size: .6rem;
    display: flex;
   justify-content: start;
   align-items: center;

}
.van-field{
    background: none;
}
.van-cell{
line-height: 1.5rem;
}
.reading{
    margin: .7rem 0;
    font-size: .4rem;
}
.button{
    margin-top: .5rem;
}
</style>